<main>
	<section class="options-row">
		<div class="left" id="sort">
			<span onclick="showOptions(0)">
				<span class="rank-type">Daily</span>
				<i class="iconfont icondown1"></i>
			</span>
			<span onclick="showOptions(1)">
				<span class="date"></span>
				<i class="iconfont icondown1"></i>
			</span>
		</div>
		<div class="right" onclick="showOptions(2)">
			<span class="blogger-type">All</span>
			<i class="iconfont icondown1"></i>
		</div>
		<div class="mask" id="mask">
			<div class="mask-con" id="maskContent">
				<div class="options-row">
					<div class="left">
						<span onclick="showOptions(0)">
							<span class="rank-type">Daily</span>
							<i class="iconfont icondown1"></i>
						</span>
						<span onclick="showOptions(1)">
							<span class="date"></span>
							<i class="iconfont icondown1"></i>
						</span>
					</div>
					<div class="right" onclick="showOptions(2)">
						<span class="blogger-type">All</span>
						<i class="iconfont icondown1"></i>
					</div>
				</div>
				<ul class="mask-list flex-row" id="timeTypeList">
					<li class="mask-item is-active" data-id="1" onclick="selectOption(this, 0)">Daily</li>
					<li class="mask-item" data-id="2" onclick="selectOption(this, 0)">Weekly</li>
					<li class="mask-item" data-id="3" onclick="selectOption(this, 0)">Monthly</li>
				</ul>
				<ul class="mask-list flex-col" id="dateList"></ul>
				<ul class="mask-list flex-col" id="bloggerTypeList"></ul>
			</div>
		</div>
	</section>
	<section class="scroll-list" id="scrollList">
        <#list dataList.list as data>
        <#if login == false>
		<a href="javascript:;" onclick="toLogin()">
            <#else>
			<a href="${contextPath}/tiktoker/${data.uniqueId}">
                </#if>
				<div class="list-item">
					<div class="item-info">
						<div class="item-avatar">
							<img class="avatar circle" src="${data.avatar}" alt="${data.nickname}">
                            <#if (data.enterpriseVerifyReason?? && data.enterpriseVerifyReason != '') || (data.customVerify?? && data.customVerify != '')>
								<i class="iconfont iconzhichi"></i>
                            </#if>
						</div>
						<div class="item-title">
							<div class="top">
								<div class="nickname">${data.nickname}</div>
								<div class="other-sns">
									<svg title="${data.region}" class="icon icon-country" aria-hidden="true">
										<use xlink:href="#icon_${data.region}"></use>
									</svg>
                                    <#if data.withFusionShopEntry == true>
										<img src="${request.contextPath}/static/img/E-commerce.png" alt="shop">
                                    </#if>
                                    <#if data.bioEmail??>
										<a href="mailto:${data.bioEmail}">
											<img src="${request.contextPath}/static/img/mail.png" alt="mail">
										</a>
                                    </#if>
								</div>
							</div>
							<div class="bottom">
                                ${data.uniqueId}
							</div>
						</div>
						<div class="item-rank">
							<div class="rank-main">${data.ranking}</div>
                            <#if data.state == 'UP'>
								<div class="sub-rank rank-up">↑ ${data.position}</div>
                            <#elseif data.state == 'NEW'>
								<div class="sub-rank rank-new">NEW</div>
                            <#elseif data.state == 'FLAT'>
								<div class="sub-rank rank-flat">-</div>
                            <#else>
								<div class="sub-rank rank-down">↓ ${data.position}</div>
                            </#if>
						</div>
					</div>
					<div class="data-list">
						<div class="data-item">
							<div class="label">GD Score</div>
                            <#assign score=myController.getNumber(data.score)>
							<div class="num">${score}</div>
						</div>
						<div class="data-item">
							<div class="label">Followers</div>
                            <#assign follower=myController.getNumber(data.follower)>
							<div class="num">${follower}</div>
						</div>
						<div class="data-item">
							<div class="label">Follower Growth</div>
                            <#assign followerGrowth=myController.getNumber(data.followerGrowth)>
							<div class="num">${followerGrowth}</div>
						</div>
					</div>
				</div>
			</a>
            </#list>
	</section>
	<section class="more">
        <#if login != false>
	        <span class="rotate"><i class="iconfont icongengxin"></i></span>
        <#else>
			<a href="javascript:;" onclick="toLogin()"> View More </a>
        </#if>
	</section>
</main>
<script src="${request.contextPath}/static/js/base.js"></script>
<script src="${request.contextPath}/static/js/nums.js"></script>
<script src="${request.contextPath}/static/js/scroll.js"></script>
<script>
    window.onload = () => {
        init()
    }

    <#if login != false>
	    let scrollTimer
	    window.onscroll = () => {
	        if(parseInt((getScrollTop() + getWindowHeight() + 54)) >= getScrollHeight()){
	            if(scrollTimer) {
	                clearTimeout(scrollTimer)
	            }
	            scrollTimer = setTimeout(() => {
	                page++
	                getRankingList()
	            }, 500)
	        } else {
	            if(scrollTimer) {
	                clearTimeout(scrollTimer)
	            }
	        }
	    }
    </#if>

    function init() {
        initEvent()
        getTime()
		getBloggerType()
    }
    function initEvent() {
        let mask = document.getElementById('mask')
        maskContent.addEventListener('touchstart', (e) => {
            e.stopPropagation()
        })

        mask.addEventListener('touchstart', (e) => {
            mask.hide()
            document.getElementsByTagName('body')[0].style.overflowX = 'hidden'
            document.getElementsByTagName('body')[0].style.overflowY = 'auto'
            e.preventDefault()
        })
    }
    function showOptions(index) {
        document.querySelector('.mask').toggleShow()
	    document.querySelectorAll('.mask-list').forEach((item, inx) => {
	        if(index === inx) {
                if(inx === 0) {
                    item.show('flex')
                } else {
                    item.show()
                }
	        } else {
                item.hide()
	        }
	    })
        document.getElementsByTagName('body')[0].style.overflowY = 'hidden'
    }
    let dailyDateList = []
    let monthlyDateList = []
    let weeklyDateList = []
    let curDate = {}
	function getTime() {
        _axios.get('/v1/ranking/date').then(res => {
            if (res && res.Code === 200) {
                dailyDateList = res.Data.dailyDate
                monthlyDateList = res.Data.monthlyDate
                weeklyDateList = res.Data.weeklyDate
                let str = ''
                dailyDateList.forEach((item,index) => {
                    str += '<li data-desc="' + item.dateDesc + '" data-code="' + item.dateCode + '" onclick="selectOption(this, 1)" class="mask-item'
                    if(index === 0) {
                        str += ' is-active'
	                    document.querySelectorAll('.options-row .date').forEach(dItem => {
                            dItem.innerText = item.dateDesc
	                    })
                        curDate = item
                    }
                    str += '">' +
                        item.dateDesc + '<div class="right"> <i class="iconfont iconzhichi"></i></div>'
                    '</li>'
                })
	            document.getElementById('dateList').innerHTML = str
            }
        })
	}
	let bloggerType = {id: 0, name: 'All'}
    function getBloggerType() {
        _axios.get('/v1/blogger/type').then(res => {
            if (res.Code === 200) {
                let str = ''
                str += '<li data-id="0" data-name="All" class="mask-item is-active" onclick="selectOption(this, 2)">'
                str += 'All <div class="right"> <i class="iconfont iconzhichi"></i></div>' +
                    '</li>'
                res.Data.forEach((item) => {
                    str += '<li data-id="' + item.id + '" data-name="' + item.name + '" onclick="selectOption(this, 2)" class="mask-item"'
                    str += '>' +
                        item.name + '<div class="right"> <i class="iconfont iconzhichi"></i></div>'
                    '</li>'
                })
	            document.getElementById('bloggerTypeList').innerHTML = str
            }
        })
    }
    let rankingType = 1
    function selectOption (e, inx) {
        <#if login == false>
            toLogin()
	        return false
        </#if>
        if(inx === 0) {
            rankingType = e.getAttribute('data-id')
	        let str = ''
	        let dateList = []
	        let rankTypes = document.querySelectorAll('.options-row .rank-type')
	        if(rankingType === '1') {
                curDate = dailyDateList[0]
                rankTypes.forEach(item => {
                    item.innerText = 'Daily'
		        })
                dateList = dailyDateList
	        } else if(rankingType === '2') {
	            curDate = weeklyDateList[0]
                rankTypes.forEach(item => {
                    item.innerText = 'Weekly'
                })
                dateList = weeklyDateList
	        } else {
	            curDate = monthlyDateList[0]
                rankTypes.forEach(item => {
                    item.innerText = 'Monthly'
                })
                dateList = monthlyDateList
	        }
            document.querySelectorAll('.options-row .date').forEach(item => {
                item.innerText = curDate.dateDesc
            })

            document.querySelector('#timeTypeList .mask-item.is-active').classList.remove('is-active')
	        document.getElementById('timeTypeList').hide()
            dateList.forEach((item,index) => {
                str += '<li data-desc="' + item.dateDesc + '" data-code="' + item.dateCode + '" onclick="selectOption(this, 1)" class="mask-item'
                if(index === 0) {
                    str += ' is-active'
	                document.querySelectorAll('.options-row .date').forEach(dItem => {
                        dItem.innerText = item.dateDesc
	                })
                    curDate = item
                }
                str += '">' +
                    item.dateDesc +
                    '</li>'
            })
	        document.getElementById('dateList').innerHTML = str
        } else if(inx === 1) {
	        document.querySelector('#dateList .mask-item.is-active').classList.remove('is-active')
            curDate = {
                dateCode: e.getAttribute('data-code'),
                dateDesc: e.getAttribute('data-desc')
            }
            document.querySelectorAll('.options-row .date').forEach(item => {
                item.innerText = curDate.dateDesc
            })
	        document.getElementById('dateList').hide()
        } else {
            document.querySelector('#bloggerTypeList .mask-item.is-active').classList.remove('is-active')
            bloggerType = {
                id: e.getAttribute('data-id'),
	            name: e.getAttribute('data-name')
            }
            document.querySelectorAll('.options-row .blogger-type').forEach(item => {
                item.innerText = bloggerType.name
            })
            //
	        document.getElementById('bloggerTypeList').hide()
        }
        e.classList.add('is-active')
        document.querySelector('.mask').hide()
        document.getElementsByTagName('body')[0].style.overflowX = 'hidden'
        document.getElementsByTagName('body')[0].style.overflowY = 'auto'
	    page = 1
	    getRankingList()
    }
    let page = 1
	function getRankingList() {
        let e = document.getElementById('scrollList')
        if(page === 1) {
            showLoading()
        }
        let data = {
            rankingType: rankingType,
            date: curDate.dateCode,
            bloggerTypeId: bloggerType.id,
            pageSize: 10,
            page: page
        }
        let url = getEncodeUrl('/v1/ranking/follower', data)
		_axios.get(url).then(res => {
            if (res.Code === 200) {
                let str = ''
                res.Data.ItemList.forEach(item => {
                    str += '' +
                        <#if login == false>
                        '<a href="javascript:;" onclick="toLogin()">' +
                        <#else>
                        '<a href="${contextPath}/tiktoker/' + item.uniqueId + '">' +
                        </#if>
                        '<div class="list-item">' +
                        '<div class="item-info">' +
                        '<div class="item-avatar">' +
                        '<img class="avatar circle" src="' + item.avatar + '">'
                    if(item.enterpriseVerifyReason || item.customVerify) {
                        str += '<i class="iconfont iconzhichi"></i>'
                    }
                    str += '</div>' +
                        '<div class="item-title">' +
                        '<div class="top">' +
                        '<div class="nickname">' + item.nickname + '</div>' +
                        '<div class="other-sns">' +
                        '<svg title="' + item.region + '" class="icon icon-country" aria-hidden="true">' +
                        '<use xlink:href="#icon_' + item.region + '"></use>' +
                        '</svg>'
                    if(item.withFusionShopEntry) {
                        str += '<img src="${request.contextPath}/static/img/E-commerce.png" alt="shop">'
                    }
                    if(item.bioEmail) {
                        str += '<a href="mailto:' + item.bioEmail + '">' +
                            '<img src="${request.contextPath}/static/img/mail.png" alt="mail">' +
                            '</a>'
                    }
                    str += '</div>' +
                        '</div>' +
                        '<div class="bottom">' + item.uniqueId +
                        '</div>' +
                        '</div>' +
                        '<div class="item-rank">' +
                        '<div class="rank-main">' + item.ranking + '</div>'
                    if(item.state === 'UP') {
                        str += '<div class="sub-rank rank-up">↑ ' + item.position + '</div>'
                    } else if(item.state === 'NEW') {
                        str += '<div class="sub-rank rank-new">NEW</div>'
                    } else if(item.state === 'FLAT') {
                        str += '<div class="sub-rank rank-flat">-</div>'
                    } else {
                        str += '<div class="sub-rank rank-down">↓ ' + item.position + '</div>'
                    }
                    str += '</div>' +
                        '</div>' +
                        '<div class="data-list">' +
                        '<div class="data-item">' +
                        '<div class="label">GD Score</div>' +
                        '<div class="num">' + numFormat(+item.score) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="label">Followers</div>' +
                        '<div class="num">' + numFormat(item.follower) + '</div>' +
                        '</div>' +
                        '<div class="data-item">' +
                        '<div class="label">Follower Growth</div>' +
                        '<div class="num">' + numFormat(item.followerGrowth) + '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</a>'
                })

                if(page > 1) {
                    e.innerHTML = e.innerHTML + str
                    // e.append(str)
                } else {
                    e.innerHTML = str
                }
            }else if(res.Code === 403) {
                let e = document.querySelector('.more')
                e.style.display = 'block'
                e.innerHTML = res.Msg.substring(3)
                setTimeout(() => {
                    document.querySelector('.more .text-link').addEventListener('click', () => {
                        window.location.href = '${contextPath}/pricing?refer=' + window.location.href
                    })
                }, 1000)
            }
            hideLoading()
		})
	}
</script>